<template>
	<div class="h-title">
		<hb-title-levels :list="list" />
		<hb-title title="最新" />
		<div class="affairs-news">
			<ul class="table-ul border">
				<li class="li-table">时间</li>
				<li class="li-table">币种</li>
				<li class="li-table">类型</li>
				<li class="li-table">数量</li>
				<li class="li-table">状态</li>
				<!-- <li class="li-table">操作</li> -->
			</ul>
			<ul class="table-items flex">
				<li class="li-table1">2018-06-08 15:23:02</li>
				<li class="li-table1">USDT</li>
				<li class="li-table1">提币</li>
				<li class="li-table1">2.0239</li>
				<li class="li-table1">成功</li>
			</ul>
			<ul class="table-items flex">
				<li class="li-table1">2018-06-07 03:13:29</li>
				<li class="li-table1">USDT</li>
				<li class="li-table1">提币</li>
				<li class="li-table1">0.0159</li>
				<li class="li-table1">成功</li>
			</ul>
			<!-- <div class="pp">
				<span v-text="text"></span>
			</div> -->
		</div>
		<div class="affairs-news-b">
			<hb-select-title0 :list="list1"
			    @select="e_sel" />
			<div class="affairs-news-list"
			    v-for="(item,i) in list1"
			    :key="i"
			    :class="{show:i==activeIndex}">
				<ul class="table-ul border">
					<li class="li-table">时间</li>
					<li class="li-table">币种</li>
					<li class="li-table">类型</li>
					<li class="li-table">数量</li>
					<li class="li-table">状态</li>
					<!-- <li class="li-table ilbk">操作</li> -->
				</ul>
				<ul class="table-items flex"
				    v-if="activeIndex == 1">
					<li class="li-table1">2018-06-08 15:23:02</li>
					<li class="li-table1">USDT</li>
					<li class="li-table1">提币</li>
					<li class="li-table1">2.0239</li>
					<li class="li-table1">成功</li>
				</ul>
				<ul class="table-items flex"
				    v-if="activeIndex == 1">
					<li class="li-table1">2018-06-07 03:13:29</li>
					<li class="li-table1">USDT</li>
					<li class="li-table1">提币</li>
					<li class="li-table1">0.0159</li>
					<li class="li-table1">成功</li>
				</ul>

				<!-- <ul>
					<li>{{item.txt}}</li>
				</ul> -->
				<div class="pp"
				    v-if="activeIndex != 1">
					<span v-text="text"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list: [{txt: '资产中心', path: 'property'}, {txt: '财务记录', path: ''}],
			list1: [{txt: '充币记录'}, {txt: '提币记录'}],
			activeIndex: 0,
			text: '',
		}
	},
	mounted() {
		this.message()
	},
	methods: {
		message() {
			if (this.text == null || this.text == '') {
				this.text = '暂无数据'
			} else {
				console.log('有数据')
			}
		},
		e_sel(i, v) {
			this.activeIndex = i
		},
	},
}
</script>

<style scoped>
.affairs-news {
	background: #191c2b;
	height: 123px;
	margin-top: -20px;
	border-top: 3px solid #161827;
}
.affairs-news-list {
	display: none;
}
.show {
	display: block;
	background: #181b2a;
}
.li-table {
	color: #7888c7;
	padding: 5px 20px;
	width: 200px;
	text-align: left;
}
.li-table1 {
	width: 200px;
	padding: 0 20px 0;
	color: var(--clr0);
	text-align: left;
}
.pp {
	padding-bottom: 20px;
	color: white;
	text-align: center;
}
.affairs-news-b {
	margin-top: 34px;
	text-align: left;
}
.border {
	border-top: 3px solid #161827;
}
.table-items {
	padding-bottom: 20px;
}
</style>
